<template>
	<view class="warp">
		<view class="charts-box">
			<qiun-data-charts :style="{width: '100%', height: '100%'}" type="ring" :opts="opts"
				:chartData="chartData" />
		</view>
		<view class="cards">
			<view class="kpi-card">
				<view class="kpi-label">本月销量</view>
				<view class="kpi-value">
					<text>{{dataObj.thisMonthSales}}</text>
					<text>万吨</text>
				</view>
			</view>
			<view class="kpi-card">
				<view class="kpi-label">本月产量</view>
				<view class="kpi-value">
					<text>{{dataObj.thisMonthProduction}}</text>
					<text>万吨</text>
				</view>
			</view>
		</view>
	</view>



</template>

<script>
	import {monthlySalesSummary} from '@/api/sale.js'
	export default {
		props:['yearMonth'],
		data() {
			return {
				dataObj:{},
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#9463F7", "#48DE94"],
					padding: [0, 0, 0, 0],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						show: false
					},
					yAxis: {
						show: false
					},
					title: {
						name: "产销比",
						fontSize: 10,
						color: "#666666"
					},
					subtitle: {
						name: '100%',
						fontSize: 10,
						color: "#999"
					},
					extra: {
						ring: {
							ringWidth: 10,
							text: "99.53%",
							activeOpacity: 0.5,
							activeRadius: 3,
							offsetAngle: 0,
							labelWidth: 1,
							border: false,
							borderWidth: 1,
							borderColor: "#FFFFFF",
							padding: [0, 0, 0, 0],
							subFontSize: 16
						}
					}
				}
			};
		},
		mounted() {
			this.getServerData();
		},
		watch:{
			yearMonth(){
				this.getServerData();
			}
		},
		methods: {
			getServerData() {
				monthlySalesSummary(this.yearMonth).then(res=>{
					// console.log(res);
					this.dataObj = res.data
					const str = this.dataObj.salesToProductionRatio*100;
					this.opts.subtitle.name = `${parseFloat(str.toFixed(2))}%`
					let resData = {
						series: [{
							data: [{
								"name": "本月销量",
								"value": this.dataObj.thisMonthSales,
								"labelShow": false
							}, {
								"name": "本月产量",
								"value": this.dataObj.thisMonthProduction,
								"labelShow": false
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(resData));
				})
				
			},
		}
	};
</script>

<style scoped lang="scss">
	.warp {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		// gap: 20rpx;
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 142rpx;
		height: 142rpx;
		border: 2rpx solid rgba(165, 203, 252, 1);
		border-radius: 50%;
		>view {
			width: 100%;
			height: 100%;
		}

	}

	.cards {
		display: flex;
		flex-wrap: wrap;
		align-content: space-around;
		// gap: 10rpx;
	}

	.kpi-card {
		// flex: 1;
		// background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		// border-radius: 16rpx;
		// padding: 0 20rpx;
		padding-left: 20rpx;
		text-align: center;
		// box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	}

	.kpi-value {
		display: flex;
		align-items: flex-end;
		font-size: 28rpx;
		font-weight: 600;
		color: rgba(0, 129, 255, 1);
		margin-bottom: 8rpx;

		>text:nth-child(2) {
			font-size: 16rpx;
		}
	}

	.kpi-label {
		display: block;
		font-size: 20rpx;
		color: #333;
	}
</style>